<script setup lang="ts">
import { getCurrentInstance, ref, onMounted } from 'vue';
// 引入api
import { nodeSearch } from '@/api/node-search';
import { IPageVo } from '@/api/dto/common';
import { INodeDefinitionVo } from '@/api/dto/node-search';
import { START_PAGE_NUM } from '@/utils/rest/constants';
import { DEPLOY_LINK } from '@/utils/constants';
// 轮播图图片
import swipperOne from '@/assets/wap/pngs/carousel-img1.png';
import swipperTwo from '@/assets/wap/pngs/carousel-img3.png';
import swipperThree from '@/assets/wap/pngs/carousel-img2.png';
import swipperFour from '@/assets/wap/pngs/carousel-img4.png';
import swipperFive from '@/assets/wap/pngs/carousel-img5.png';
import swipperSix from '@/assets/wap/pngs/carousel-img6.png';
import GraphicalEditor from '@/views/wap/graphical-editor.vue';

const images = [swipperOne, swipperTwo, swipperThree, swipperFour, swipperFive, swipperSix];

// dsl模拟展示代码
const workflow =
  'name: 建木官网CDN CI/CD\n' +
  'description: 建木官网CDN CI/CD\n\n' +
  'workflow:\n' +
  '  start:\n' +
  '    type: start\n' +
  '    targets:\n' +
  '      - git_clone\n' +
  '  git_clone:\n' +
  '    type: git_clone:1.0.0\n' +
  '    sources:\n' +
  '      - start\n' +
  '    targets:\n' +
  '      - node_build\n' +
  '    param:\n' +
  '      remote_url: https://gitee.com/jianmu-dev/jianmu-official-site.git\n' +
  '      ref: refs/heads/master\n' +
  '      netrc_machine: gitee.com\n' +
  '      netrc_username: ((gitee.username))\n' +
  '      netrc_password: ((gitee.password))\n' +
  '  node_build:\n' +
  '    type: nodejs_build:1.0.0-14.16.1\n' +
  '    sources:\n' +
  '      - git_clone\n' +
  '    targets:\n' +
  '      - qiniu_upload\n' +
  '    param:\n' +
  '      workspace: ${git_clone.git_path}\n' +
  '      build_arg: --mode cdn\n' +
  '  qiniu_upload:\n' +
  '    type: qiniu_upload:1.0.1\n' +
  '    sources:\n' +
  '      - node_build\n' +
  '    targets:\n' +
  '      - update_index_page\n' +
  '    param:\n' +
  '      qiniu_bucket: jianmu\n' +
  '      qiniu_ak: ((qiniu.AccessKey))\n' +
  '      qiniu_sk: ((qiniu.SecretKey))\n' +
  '      qiniu_zone: z1\n' +
  '      qiniu_upload_uri_prefix: ${node_build.package_name}/${node_build.package_version}\n' +
  '      qiniu_upload_dir: ${git_clone.git_path}/dist\n' +
  '  update_index_page:\n' +
  '    type: scp_resouce:1.0.0\n' +
  '    sources:\n' +
  '      - qiniu_upload\n' +
  '    targets:\n' +
  '      - send_message\n' +
  '    param:\n' +
  '      ssh_private_key: ((private_key.alixg))\n' +
  '      ssh_ip: 47.243.164.48\n' +
  '      remote_file: /etc/nginx/html/index.html\n' +
  '      local_file: ${git_clone.git_path}/dist/index.html\n' +
  '  send_message:\n' +
  '    type: qywx_notice:1.0.0\n' +
  '    sources:\n' +
  '      - update_index_page\n' +
  '    targets:\n' +
  '      - end\n' +
  '    param:\n' +
  '      bot_webhook_url: ((charbot.webhook_url))\n' +
  '      mentioned_moblie_list: "[]"\n' +
  '      text_content: "建木官网CDN更新完成\\\\n\\\\n版本：${node_build.package_version}"\n' +
  '      msgtype: "text"\n' +
  '      mentioned_list: "[]"\n' +
  '  end:\n' +
  '    type: end\n' +
  '    sources:\n' +
  '      - send_message\n';
const pipeline =
  'name: 建木官网CDN CI/CD\n' +
  'description: 建木官网CDN CI/CD\n\n' +
  'pipeline:\n' +
  '  git_clone:\n' +
  '    type: git_clone:1.0.0\n' +
  '    param:\n' +
  '      remote_url: https://gitee.com/jianmu-dev/jianmu-official-site.git\n' +
  '      ref: refs/heads/master\n' +
  '      netrc_machine: gitee.com\n' +
  '      netrc_username: ((gitee.username))\n' +
  '      netrc_password: ((gitee.password))\n' +
  '  node_build:\n' +
  '    type: nodejs_build:1.0.0-14.16.1\n' +
  '    param:\n' +
  '      workspace: ${git_clone.git_path}\n' +
  '      build_arg: --mode cdn\n' +
  '  qiniu_upload:\n' +
  '    type: qiniu_upload:1.0.1\n' +
  '    param:\n' +
  '      qiniu_bucket: jianmu\n' +
  '      qiniu_ak: ((qiniu.AccessKey))\n' +
  '      qiniu_sk: ((qiniu.SecretKey))\n' +
  '      qiniu_zone: z1\n' +
  '      qiniu_upload_uri_prefix: ${node_build.package_name}/${node_build.package_version}\n' +
  '      qiniu_upload_dir: ${git_clone.git_path}/dist\n' +
  '  update_index_page:\n' +
  '    type: scp_resouce:1.0.0\n' +
  '    param:\n' +
  '      ssh_private_key: ((private_key.alixg))\n' +
  '      ssh_ip: 47.243.164.48\n' +
  '      remote_file: /etc/nginx/html/index.html\n' +
  '      local_file: ${git_clone.git_path}/dist/index.html\n' +
  '  send_message:\n' +
  '    type: qywx_notice:1.0.0\n' +
  '    param:\n' +
  '      bot_webhook_url: ((charbot.webhook_url))\n' +
  '      mentioned_moblie_list: "[]"\n' +
  '      text_content: "建木官网CDN更新完成\\\\n\\\\n版本：${node_build.package_version}"\n' +
  '      msgtype: "text"\n' +
  '      mentioned_list: "[]"\n';
// 切换flag
const workFlowFlag = ref<boolean>(true);
const pipeLineFlag = ref<boolean>(false);
// 切换到流程dsl
const toWorkFlow = () => {
  workFlowFlag.value = true;
  pipeLineFlag.value = false;
};
// 切换到管道dsl
const toPipeLine = () => {
  workFlowFlag.value = false;
  pipeLineFlag.value = true;
};
// 如何部署
const toDeploy = () => {
  window.location.href = DEPLOY_LINK;
};
// 节点库
const toNodeStore = () => {
  window.location.href = 'https://hub.jianmu.dev';
};

// 请求到的节点数据
const nodeSearchDate = ref<IPageVo<INodeDefinitionVo>>();
const { proxy } = getCurrentInstance() as any;

// 节点数据请求
onMounted(async () => {
  try {
    nodeSearchDate.value = await nodeSearch({
      pageNum: START_PAGE_NUM,
      pageSize: 18,
    });
  } catch (err) {
    proxy.$thow(err, proxy);
  }
});
</script>

<template>
  <!-- 文档入口 -->
  <div class="official-document-entry">
    <div class="document-title">
      建木
    </div>
    <div class="document-content">
      建木是一个面向DevOps领域的极易扩展的开源无代码(图形化)/低代码(GitOps)工具。可以帮助用户轻松编排各种DevOps流程并分发到不同平台执行。
    </div>
    <div class="wap-badges">
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://gitee.com/jianmu-dev/jianmu/badge/star.svg?theme=gvp' alt='gitee star'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu/blob/master/LICENSE">
          <img src='https://img.shields.io/badge/liscense-MulanPSL--2.0-green.svg' alt='license'/>
        </a>
      </div>
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/OS%2FARCH-AMD64%2FARM64-important.svg' alt='os/arch'/>
        </a>
      </div>
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img
            src='https://img.shields.io/badge/-%E6%97%A0%E4%BB%A3%E7%A0%81(%E5%9B%BE%E5%BD%A2%E5%8C%96)-brightgreen.svg'
            alt='无代码(图形化)'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/-%E4%BD%8E%E4%BB%A3%E7%A0%81(GitOps)-brightgreen.svg'
               alt='低代码(GitOps)'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/devops-yellow.svg' alt='devops'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/CI%2FCD%2FCO-yellow.svg' alt='ci/cd/co'/>
        </a>
      </div>
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/JDK11+-lightgrey.svg' alt='jdk'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/MySQL8+-lightgrey.svg' alt='mysql'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Vue3-lightgrey.svg' alt='vue'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Typescript4+-lightgrey.svg' alt='typescript'/>
        </a>
      </div>
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Docker-lightgrey.svg'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Kubernetes-lightgrey.svg'/>
        </a>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btns-container deploy">
      <div
        class="to-deploy-btn document-btn-common"
        @click="toDeploy"
      >
        如何部署
      </div>
    </div>
  </div>
  <graphical-editor/>
  <!-- 配置即代码 -->
  <div class="official-common-container">
    <div class="common-title">
      配置即代码
    </div>
    <div class="common-description">
      提供声明式语法将流程代码化，通过代码库进行版本控制，快速实现幂等部署与故障恢复。
    </div>
    <div class="configure">
      <!-- 控制器 -->
      <div class="controller-container">
        <div class="controller">
          <img
            src="@/assets/wap/svgs/left.svg"
            v-if="workFlowFlag"
          >
          <img
            src="@/assets/wap/svgs/left-active.svg"
            @click="toWorkFlow"
            v-else
          >
          <div
            class="controller-title"
            v-if="workFlowFlag"
          >
            <img src="@/assets/wap/svgs/workflow-label.svg">
            流程
          </div>
          <div
            class="controller-title"
            v-else
          >
            <img src="@/assets/wap/svgs/flowchart.svg">
            管道
          </div>

          <img
            src="@/assets/wap/svgs/right.svg"
            v-if="pipeLineFlag"
          >
          <img
            src="@/assets/wap/svgs/right-active.svg"
            v-else
            @click="toPipeLine"
          >
        </div>
      </div>
      <!-- dsl展示 -->
      <div class="dsl-show">
        <div class="dsl-show-container">
          <jm-dsl-editor
            :value="workFlowFlag ? workflow : pipeline"
            readonly
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 流程可视化 -->
  <div class="official-common-container visualization">
    <div class="common-title">
      流程可视化
    </div>
    <div class="common-description">
      流程配置可视化，任务编排与执行状态一目了然。
    </div>
    <!-- 轮播图 -->
    <div class="visualization-swipper">
      <div class="swipper-shadow"/>
      <van-swipe
        :autoplay="3000"
        indicator-color="#096DD9"
      >
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
        >
          <img v-lazy="image">
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
  <!-- 节点生态 -->
  <div class="official-common-container node-ecology">
    <div class="common-title">
      节点生态
    </div>
    <div class="common-description">
      使用官方与社区提供的节点自由组合，灵活满足各类需求。贡献节点，分享自己的成果。
    </div>
    <!-- 节点展示 -->
    <div class="node-show">
      <a
        class="node-container"
        v-for="item in nodeSearchDate?.content"
        :key="item.id"
        :href="`https://hub.jianmu.dev/${item.ownerRef}/${item.ref}`"
      >
        <img
          :src="`${item.icon}?imageMogr2/thumbnail/132x/sharpen/1`"
          class="node-img"
        >
        <div class="node-title">{{ item.name }}</div>
      </a>
    </div>
  </div>
  <!-- 节点库-按钮 -->
  <div class="btns-container">
    <div
      class="common-btn"
      @click="toNodeStore"
    >
      节点库
    </div>
  </div>
  <!-- 平台中立 -->
  <div class="platform-fence-sitter">
    <div class="common-title">平台中立</div>
    <div class="common-description">
      无平台倾向性，用户可根据需要自行选择
    </div>
    <div class="platforms">
      <div class="platform-line">
        <div class="platform-item">
          <img src="~@/assets/wap/svgs/platform-1.svg" alt="">
          <span>Github</span>
        </div>
        <div class="platform-item">
          <img src="~@/assets/wap/svgs/platform-2.svg" alt="">
          <span>Gitlab</span>
        </div>
        <div class="platform-item">
          <img src="~@/assets/wap/svgs/platform-3.svg" alt="">
          <span>Gitee</span>
        </div>
      </div>
      <div class="platform-line">
        <div class="platform-item">
          <img src="~@/assets/wap/svgs/platform-4.svg" alt="">
          <span>Bitbucket</span>
        </div>
        <div class="platform-item">
          <img src="~@/assets/wap/svgs/platform-5.svg" alt="">
          <span>GitLink</span>
        </div>
        <div class="platform-item">
          <img src="~@/assets/wap/svgs/platform-6.svg" alt="">
          <span>Gitea</span>
        </div>
      </div>
      <div class="platform-line">
        <div class="platform-item">
          <img src="~@/assets/wap/pngs/platform-7.png" alt="">
          <span>Coding</span>
        </div>
        <div class="platform-item">
          <img src="~@/assets/wap/pngs/platform-8.png" alt="">
          <span>Gitcode</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
// 文档入口
.official-document-entry {
  width: 100%;
  padding: 34px 30px 0 30px;

  .document-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 46px;
  }

  .wap-badges {
    div {
      height: 40px;
      margin-bottom: 18px;

      &:last-child {
        margin-bottom: 0;
      }

      a {
        height: 100%;
        margin-right: 18px;
        display: inline-block;

        img {
          width: 100%;
          height: 100%;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .document-content {
    font-size: 30px;
    line-height: 48px;
    margin-bottom: 40px;
  }

  // 按钮公共样式
  .document-btn-common {
    width: 690px;
    height: 90px;
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 90px;
    text-align: center;
    border-radius: 10px;
  }

  .to-deploy-btn {
    background: #0f2647;
    color: #fff;
    margin-bottom: 30px;
  }
}

// 公共盒子+标题内容样式
.official-common-container {
  margin-top: 64px;

  .common-title,
  .common-description {
    padding: 0 30px;
  }

  // 标题
  .common-title {
    font-size: 36px;
    font-weight: 700;
  }

  // 描述
  .common-description {
    font-size: 30px;
    margin: 40px 0 60px 0;
    line-height: 48px;
  }

  // 配置即代码
  .configure {
    margin-bottom: 80px;
    // dsl代码-控制器
    .controller-container {
      padding: 0 30px;

      .controller {
        height: 94px;
        padding: 0 30px;
        border: 1px solid #a5b5c3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px 4px 0 0;

        img {
          width: 32px;
          height: 33px;
        }

        .controller-title {
          display: flex;
          align-items: center;
          font-size: 30px;
          color: #042749;
          font-weight: 700;

          img {
            margin-right: 20px;
          }
        }
      }
    }

    // dsl展示
    .dsl-show {
      background: url('@/assets/wap/svgs/configure.svg');
      background-size: 100% 100%;
      font-size: 21px;
      line-height: 30px;
      padding-bottom: 40px;

      .dsl-show-container {
        padding: 0 30px;

        ::v-deep(.jm-dsl-editor) {
          padding-bottom: 22px;
        }

        ::v-deep(.CodeMirror-sizer) {
          padding: 18px 16px;
        }

        ::v-deep(.CodeMirror .CodeMirror-linenumber) {
          color: #c1d7ff;
          text-align: center;
        }

        ::v-deep(.CodeMirror-gutter) {
          color: #c1d7ff;
          text-align: center;
          padding-right: 15px;
          margin-right: 20px;
          border-right: 1px solid #4a638f;
        }

        ::v-deep(.CodeMirror-scroll) {
          width: 690px;
          height: 493px;
          top: 0;
          left: 0;
        }
      }
    }
  }
}

// 流程可视化
.visualization {
  width: 100%;
  background: url('@/assets/wap/svgs/visualization.svg') no-repeat;
  background-size: 100%;
  padding: 0 30px;
  height: 534px;

  .common-title,
  .common-description {
    padding: 0;
  }

  .visualization-swipper {
    width: 690px;
    height: 302px;
    position: relative;

    .swipper-shadow {
      position: absolute;
      left: 0;
      top: 0;
      width: 690px;
      height: 253px;
      box-shadow: 0px 0px 30px 0px #dce3ef;
    }

    ::v-deep(.van-swipe) {
      position: static;
      // 轮播图内容
      .van-swipe-item {
        height: 253px;

        img {
          height: 253px;
        }
      }

      // 轮播图切换点
      .van-swipe__indicators {
        .van-swipe__indicator {
          background: #bcc3cc;
          width: 40px;
          height: 6px;
          margin-right: 20px;
          border-radius: 3px;
        }
      }
    }
  }
}

// 公共按钮样式
.btns-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80px;
  margin-top: 50px;

  &.deploy {
    margin-bottom: 20px;
  }

  .common-btn {
    width: 690px;
    height: 94px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 94px;
    color: #fff;
    background: #0f2647;
    border-radius: 10px;
  }
}

// 节点生态
.node-ecology {
  background: url('@/assets/wap/svgs/node-ecology.svg');
  background-size: 100%;
  // 节点展示
  .node-show {
    width: 750px;
    height: 314px;
    padding: 0 30px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    .node-container {
      width: 168px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;
      margin-right: 4px;
      // 节点图片
      .node-img {
        width: 88px;
        height: 88px;
        margin-bottom: 11px;
        border-radius: 22.19px;
      }

      // 节点名
      .node-title {
        width: 150px;
        font-size: 20px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .node-container:nth-of-type(5) {
        margin-right: 0;
      }
    }
  }
}

// 平台中立
.platform-fence-sitter {
  box-sizing: border-box;
  padding: 0 30px;
  // 标题
  .common-title {
    font-size: 36px;
    font-weight: 700;
  }

  // 描述
  .common-description {
    font-size: 30px;
    margin: 40px 0px;
    line-height: 48px;
  }

  .platforms {
    margin-bottom: 80px;

    .platform-line {
      display: flex;
      margin-bottom: 40px;

      &:nth-child(2) {
        .platform-item:nth-child(2) {
          img {
            width: 64px;
            height: 40px;
          }
        }
      }

      &:last-child {
        margin-bottom: 0;
      }

      .platform-item {
        box-shadow: 0 0 30px 0 #E1E6ED;
        flex-shrink: 0;
        box-sizing: border-box;
        width: 203px;
        height: 90px;
        margin: 0 40px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;

        &:last-child {
          margin-right: 0;
        }

        img {
          width: 54px;
          height: 54px;
        }

        span {
          margin-left: 10px;
          color: #042749;
          font-weight: 600;
          font-size: 26px;
        }
      }
    }
  }
}
</style>
